<template>
	<view class="mianboxtabbar">
		<view class="goods" >
		<view   class="iconfont" :class="item.icon,store.state.active ===i ? 'active':''" @tap="Tapnav(i)"   v-for="(item,i) in iconobj" :key="i">				
			<text>{{item.text}}</text>
		</view>
	</view>
	</view>
</template>

<script setup>
	import {reactive,toRefs} from 'vue'
	import { useStore } from 'vuex'; // 引入useStore 方法
	const store = useStore(); // 该方法用于返回store 实例
	const state = reactive({
iconobj:[
	{icon:'icon-shouye',text:'首页'},
	{icon:'icon-xitong',text:'分类'},
	{icon:'icon-icon-test10',text:'购物车'},
	{icon:'icon-31wode',text:'我的'}
]
	});
  let {iconobj} = toRefs(state)
	const Tapnav =(i)=>{
		switch(i){
			case 0:
			store.commit('setactive',i);
			uni.navigateTo({
				url:'/pages/home/home'
			})
			break;
			case 1:
			store.commit('setactive',i);
			uni.navigateTo({
				url:'/pages/cate/cate'
			})
			break;
			case 2:
			store.commit('setactive',i);
			uni.navigateTo({
				url:'/pages/cart/cart'
			})
			break;
			case 3:
			store.commit('setactive',i);
			uni.navigateTo({
				url:'/pages/my/my'
			})
		}
	}

</script>

<style lang="scss" scoped>
.mianboxtabbar{
	position: fixed;
	background-color: #fff;
	height: 50px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9;
  box-shadow:0 0 10px 0 hsl(0deg 6% 58% / 60%);
	// #ifndef H5
	padding-bottom:20px;
	// #endif
	.active{
	color: red;
	}
	.goods{
		height: 100%;
		display: flex;
		justify-content:space-around;
		align-items: center;
		.iconfont{
			display: flex;
			flex-direction: column;
			align-items:center;
			padding: 6px 12px;
			>text{
			padding-top:4px;
			font-size:  6px;
			}
		}
	}
}
</style>